<!--
 * 作者：zhang
 * 时间：2024/7/21 下午10:30
 * 功能：
 *
-->
<script setup lang="ts">
const activeIndex = ref(1)
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

</script>

<template>
  <div class="menu-bar">
   <van-tabs v-model="activeIndex">
     <van-tab :title="item.name" v-for="(item, index) in props.data" :key="index" :class="{'active': index === activeIndex}"
      @click="activeIndex = index"
     >
     </van-tab>
   </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.menu-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #333;
  color: #fff;
  overflow: scroll;
}

.menu-bar-item {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  &:hover {
    background-color: #555;
  }

  &.active {
    background-color: #666;
    font-weight: bold;
  }
}

.menu-bar-item a {
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

</style>
